// import { reduceMotion, restoreMotion } from '@/components/common/tools/reduce-and-restore-motion'

import { useState } from 'react'
import { Button } from '@/library/gallery/components/Button'
import { Space } from '@/library/gallery/components/Space'
import { SpinLoading } from '@/library/gallery/components/SpinLoading'
import { DemoBlock } from '@/library/widgets/DemoBlock'

// React.useEffect(() => {
//   reduceMotion()
// }, [])

export default (): React.ReactElement => {
  const [openFull, setOpenFull] = useState(false)
  return (
    <>
      <DemoBlock title="默认">
        <SpinLoading />
        <SpinLoading color="primary" />
      </DemoBlock>

      <DemoBlock title="无效 - 非 fullScreen 不渲染 children">
        <SpinLoading>123</SpinLoading>
      </DemoBlock>

      <DemoBlock title="block">
        <SpinLoading block />
        <SpinLoading block />
      </DemoBlock>

      <DemoBlock title="颜色">
        <Space direction="horizontal" wrap style={{ '--gap': '16px' }}>
          <SpinLoading color="default" />
          <SpinLoading color="primary" />
          <SpinLoading color="currentColor" />
          <SpinLoading color="yellow" />
        </Space>
      </DemoBlock>

      <DemoBlock title="大小">
        <Space direction="horizontal" style={{ '--gap': '16px' }}>
          <SpinLoading color="primary" style={{ '--size': '24px' }} />
          <SpinLoading style={{ '--size': '32px', '--color': 'yellow' }} />
          <SpinLoading style={{ '--size': '48px' }} />
        </Space>
      </DemoBlock>

      <DemoBlock title="全屏">
        <SpinLoading color="primary" fullScreen={openFull} loading>
          <Button onClick={() => setOpenFull(false)}>关闭全屏</Button>
        </SpinLoading>
      </DemoBlock>

      <Button onClick={() => setOpenFull(true)}>开启全屏</Button>
    </>
  )
}
